<template>
    <div>
        <div style="background-color: #f3e5f5; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #9C27B0;">
            <h3 style="color: #7B1FA2; margin-top: 0;">🎨 技术解释：条件渲染与动态样式</h3>
            <p><strong>条件渲染 (v-if/v-else)：</strong>根据数据状态动态显示不同的DOM元素，v-if会完全移除/添加元素，适用于切换频率较低的场景。</p>
            <p><strong>动态样式绑定 (:style)：</strong>使用计算属性返回样式对象，实现样式的动态计算和应用，比直接写CSS更灵活。</p>
            <p><strong>计算属性样式：</strong>将样式逻辑封装在计算属性中，便于复用和维护，同时享受Vue的缓存优化。</p>
            <p><strong>响应式样式：</strong>当isRed状态改变时，不仅内容会切换，样式也会相应变化，实现完整的UI状态管理。</p>
        </div>
        <button @click="toggleColor" style="margin-bottom: 15px; padding: 8px 16px; background-color: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
            切换颜色
        </button>
        <p v-if="isRed" :style="redStyle">this is red text</p>
        <p v-else :style="blueStyle">this is blue text</p>
    </div>
</template>
<script>
import { computed } from 'vue';

export default{
    data(){
        return {
            isRed: false
        };
    },
    computed: {
        redStyle() {
            return {
                color : 'red',
                fontSize : '20px'
            };
        },
        blueStyle() {
            return {
                color : 'blue',
                fontSize : '16px'
            };
        }
    },
    methods: {
        toggleColor() {
            this.isRed = !this.isRed;
        }
    }
};

</script>